<template>
  <div>
    <div class="body_box">
      <div class="title_box">
        <span class="title_line"></span>
        <span class>筛选</span>
      </div>
      <!-- -->
 <el-form style="margin-top:20px" class="demo-form-inline" label-width="85px">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="跑团名称：">
            <el-input size="mini" placeholder="请输入跑团名称"></el-input>
          </el-form-item>
        </el-col>
    
        <el-col :span="4">
          <el-form-item label-width="10px">
            <el-button class="com-btn" icon="el-icon-search" size="mini">搜索</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
      <!-- 列表 -->
      <div class="title_box">
        <span class="title_line"></span>
        <span class>跑团列表</span>
      </div>
      <template>
        <!-- <Table width="1000" class="runTable" border :columns="runheader" :data="runList"></Table> -->
        <el-table border :data="runList" style="width: 100%">
          <el-table-column type="index" width="80" label="序号"></el-table-column>
          <el-table-column
            v-for="(item,index) in runheader"
            :key="index"
            :label="item.title"
            :prop="item.key"
            :min-width="item.minWidth"
          >
            <template slot-scope="scope">
              <div>{{scope.row[item.key]}}</div>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="100" fixed="right">
            <template slot-scope="scope">
              <el-button
                @click.native.prevent="look(scope.$index, scope.row)"
                icon="el-icon-view"
                size="mini"
              >查看</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
         <div class="page-box">
          <el-pagination
            background
            small
            :current-page="current_page"
            :page-size="per_page"
            layout="total, prev, pager, next, jumper"
            :total="30"
          ></el-pagination>
        </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      team_name:'',
      current_page:1,
      pageSizes:[10,20,30,50],
      per_page:10,
      formItem: {
        input: ""
      },
      runheader: [
        { title: "跑团名称", key: "runName", minWidth: 140 },
        { title: "ID", key: "ID", minWidth: 100 },
        { title: "团长", key: "regimental", minWidth: 100 },
        { title: "手机号", key: "phone", minWidth: 100 },
        { title: "城市", key: "city", minWidth: 100 },
        { title: "会员数", key: "vipNum", minWidth: 80 },
        { title: "活动数", key: "activeNum", minWidth: 80 },
        { title: "创建时间", key: "createTime", minWidth: 200 }
        // { title: "操作", key: "operation", minWidth: 100, fixed:true }
      ],
      runList: [
        {
          runName: "葫芦岛悦跑团",
          ID: "42205",
          regimental: "王",
          phone: "1586647514",
          city: "北京",
          vipNum: "10",
          activeNum: "10",
          createTime: "2018-12-21 20:55:38"
        }
      ]
    };
  },
  methods: {

    look(index, content) {
      console.log(index, content);
      this.$router.push({path:'/stage/team/list/info',query:{id:content.ID}})
    }
  }
};
</script>

<style scopde>
@import url("../../assets/css/team/list.css");
</style>